<template>
    <div id="coupon">
        <mt-header fixed title="我的优惠卷">
            <span slot="left">
                <mt-button icon="back" @click.native="goB">返回</mt-button>
            </span>
        </mt-header>
        <div class="coupon-content" ref="couponScroll" v-getH>
            <div class="list">
                 
                 <!-- 显示没过期的 -->
                <div  v-for="(item, index) in myCouponMenu" :key="index+ '-' +1">
                    <mt-cell
                        :title="item.msg"
                        is-link
                        v-if="item.couponStatus === 1"
                        @click.native="couponInfo(index)"
                        >
                        <span class="icon" style="color: red;">{{ item.uname}}-{{item.sname}}</span>
                    </mt-cell>
                </div>

                <!-- 显示已经过期的 -->
                <div  v-for="(item, index) in myCouponMenu" :key="index + '-'">
                    <mt-cell
                        :title="item.msg"
                        is-link
                        v-if="item.couponStatus != 1 && item.couponStatus != 4"
                        @click.native="couponInfo(index)"
                        >
                        <span class="icon" v-if="item.couponStatus === 2">已经使用</span>
                        <span class="icon" v-else-if="item.couponStatus === 3">已过期</span>
                    </mt-cell>
                </div>
            </div>
        </div>
        <!-- 没有优惠劵为 0显示的信息 空空如也 -->
        <div class="emplty" v-if="myCouponMenu.length === 0">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-meiyouxiangguan"></use>
                </svg>
            </div>
            <div class="text">
                空空的
            </div>
        </div>
        <!-- 优惠卷的显示信息 -->
        <transition name="cou">
            <div @click.self="isShowInfo = false" v-if="isShowInfo" class="show-info">
                <div class="info">
                    <p>用户名：<span>{{info.uname}}</span></p>
                    <p>店铺：<span>{{info.sname}}</span></p>
                    <p>优惠：<span>{{info.msg}}</span></p>
                    <div class="delect">
                        <mt-button @click.native="delectCoupon"  type="danger" size="large">删除优惠卷</mt-button>
                    </div>
                </div>
              
            </div>
        </transition>
    </div>
</template>
<script>
import{mapState, mapMutations, mapActions} from 'vuex'
import { MessageBox, Indicator} from 'mint-ui'
import Bscroll from 'better-scroll'
import axios from 'axios'
export default {
    data(){
        return {
            isShowInfo: false,
            info: {},//查看某条优惠卷的数据信息
        }
    },
    inject: ['goB'],
    created(){

        //此时也不再这里获取我的优惠卷  在person获取
        this.$nextTick(() =>{
            if(!this.$refs.couponScroll) return
            this.couponScroll = new Bscroll(this.$refs.couponScroll, {click: true})
        })
    },
    computed:{
        ...mapState([
            'uname',
            'myCouponMenu',
        ])
    },
    methods:{
        ...mapMutations([
            'setIndicator',
            'setMessage'
        ]),
        ...mapActions([
            'useCoupon',
            'takeCoupon'
        ]),


        //查看优惠卷信息
        couponInfo(index){
            this.isShowInfo = true
            this.info = this.myCouponMenu[index]
        },
        //删除优惠劵
        delectCoupon(){
            const {info, myCouponMenu} = this

             MessageBox({
                title: '提示',
                message: '删除优惠劵：'+ info.msg+'?',
                showCancelButton: true
            }).then(action =>{
                if(action === 'cancel') return

                    //网络慢的话 显示加载
                this.setIndicator('')
                //关闭页面
                this.isShowInfo = false

                this.useCoupon({
                    couponFlag: info.couponFlag,
                    couponId:info.couponId,
                    data:{
                        couponId: null//既然删除了就没必要
                    }
                }).then(() =>{

                    const i = this.myCouponMenu.findIndex(item =>{
                        return item.couponFlag === info.couponFlag
                    })

                    this.myCouponMenu.splice(i ,1)
                    this.setMessage('删除成功')

                    Indicator.close()

                }, () =>{
                    this.setMessage('删除失败, 请稍后再试')
                    Indicator.close()
                })            
            })
        }
    },

        //指令
    directives:{
        //商品滚动的最大高度
        getH:{
             inserted: function (el, binding) {
               el.style.height = (document.querySelector('html').clientHeight - 40) + 'px'
            }
        },
     
    }
}
</script>
<style lang="less" scoped>
    #coupon{
        height: 100%;
        overflow: hidden;
        .coupon-content{
            margin-top: 40px;
            .list{
                .icon{
                    font-size: 13px;
                }
            }
        }
        .show-info{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            // background: rgba(0,0,0,0.5);
            z-index: 1;
            .info{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background: #fff;
                box-sizing: border-box;
                background-color: #49CB5F;
                > p{
                    padding: 5px;
                    color: #fff;
                    font-size: 18px;
                }
                .delect{
                   
                }
            }
        }
    }


.cou-enter,
.cou-leave-to{
    opacity: 0;
    transform: translateY(100%);
}

.cou-enter-active,
.cou-leave-active{
    transition: all 0.3s;
}
</style>


